<template>
  <div class="order_page">
    <van-sticky>
      <div class="title">
        <img src="@/assets/img/back.png" alt="" @click="back">
        <div class="text">查询订单</div>
        <div class="home" @click="backHome">
          <img src="@/assets/img/home.png" alt="">
        </div>
      </div>
    </van-sticky>
    <div class="search_area">
      <van-field
        v-model="phone_number"
        label="手机号码/邮箱/支付订单号"
        placeholder="输入您的手机号码"
        label-align="top"
        style="padding: 0;margin-right: 20px;"
      />
      <van-button type="primary" @click="search" style="width: 94px;padding: 5px;">立即查询</van-button>
    </div>
    <div class="content_area">
      <div class="content_item" v-for="item in listData">
        <div class="logo">
          <img :src="item.image" alt="">
        </div>
        <div class="order">
          <div class="app_name">{{ item.appName }}</div>
          <div class="order_code">订单号：{{ item.outTradeNo }}</div>
          <div class="order_buy">
            <span class="order_price">订单金额：{{ item.totalFee }}</span>
            <!-- <span class="order_num">购买数量：{{ item.order_num }}</span>  -->
          </div>
          <div class="pay_way">支付方式：{{ item.payType }}</div>
          <div class="create_time">订单创建时间：{{ item.orderCreateTime }}</div>
          <div class="pay_time">付款时间：{{ item.orderPayTime }}</div>
          <van-field
            class="field_group"
            v-model="item.udid"
            label="输入udid"
            placeholder="请输入udid"
            label-align="top"
            style="padding: 0;"
            required
            @change="updateUDID(item.udid,item.userGoodsId)"
          >
            <template #button>
              <van-button size="small" class="get_udid" @click="getUdid">获取udid</van-button>
            </template>
          </van-field>
          <p v-if="item.udid && item.status == 1" style="font-size: 11px;color: #666;margin: 7px 0 0 0;">请耐心等待1-2分钟，后台处理后点击安装按钮即可安装</p>
          <div style="display: flex; align-items: center;">
            <van-button class="install" @click="install(item.plistUrl )" v-if="item.status == 2">安装</van-button>
            <van-tag plain v-if="item.status == 1" size="large">处理中</van-tag>
            <van-button class="jiaocheng" type="primary" @click="getUDIDVideo()">udid获取教程</van-button>
          </div>

        </div>
      </div>
      <!-- <div class="content_item" v-for="i in 4">
        <div class="logo">
          <img src="" alt="">
        </div>
        <div class="order">
          <div class="app_name">{{ 1 }}</div>
          <div class="order_code">订单号：{{ 2}}</div>
          <div class="order_buy">
            <span class="order_price">订单金额：{{ 3 }}</span>
            <span class="order_num">购买数量：{{ 'item.order_num' }}</span>
          </div>
          <div class="pay_way">支付方式：{{ 4 }}</div>
          <div class="create_time">订单创建时间：{{ 'item.orderCreateTime' }}</div>
          <div class="pay_time">付款时间：{{ 'item.orderPayTime' }}</div>
          <van-field
            class="field_group"
            v-model="udid"
            label="输入udid"
            placeholder="请输入输入udid"
            label-align="top"
            style="padding: 0;"
            required
            @change="updateUDID(udid)"
          >
            <template #button>
              <van-button size="small" class="get_udid" @click="getUdid">获取udid</van-button>
            </template>
          </van-field>
          <van-button class="install" @click="install('item.plistUrl' )">安装</van-button>
          <van-button class="jiaocheng" type="primary" @click="getUDIDVideo()">udid获取教程</van-button>
        </div>
      </div> -->
    </div>
    <div class="seek_order kefu" @click="kefu">
      <img src="@/assets/img/seek.png" alt="">
    </div>
  </div>
</template>
<script setup lang="ts">
import Request from '@/utils/axios';
import { showLoadingToast, closeToast, showNotify, showToast,showSuccessToast,showFailToast } from 'vant';
import {ref,onMounted} from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
let phone_number = ref('')
let udid = ref('')
let udidLink:string // 获取udid链接

const listData = ref<any[]>([])

const install = (plistUrl :string) => {
  let url = `https://${window.location.hostname}/h5/download.html?plist=${plistUrl}`
  // window.open(url,'_blank')
  window.location.href = url
}

const getUDIDVideo = () => {
  // window.open('https://cdn.yicsucc.com/appletools/other/8458_1733301147.mp4','_blank');
  window.location.href = 'https://cdn.yicsucc.com/appletools/other/8458_1733301147.mp4'
}

const search = () => {
  if (phone_number.value.trim() == "") {
    showNotify({ type: 'danger', message: '请填写您的手机号/邮箱/支付订单号', duration: 1500 });
    return;
  }
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  Request.get(`/user/goods?page=1&size=99999&goodsPid=0&phone=${phone_number.value}`,).then((res:any) => {
    if (res.code == 0) {
      listData.value = res.data.items
      listData.value.forEach((ele:any) => {
        if (!ele.udid || ele.udid == "") {
          ele.udid = udid.value
          if (udid.value) {
            let formData = new FormData()
            formData.append('udid',ele.udid)
            formData.append('userGoodsId',ele.userGoodsId)
            Request.post('/user/goods/save',formData).then((res:any) => {
              if (res.code === 0) {
              }
            })
          }
        }
      })
      console.log(listData.value);
      closeToast()
      if (listData.value.length == 0) {
        showToast('暂无数据')
      }
    }
  })
}
const getUdid = () => {
  // window.open(udidLink,'_blank');
  window.location.href = udidLink + `?phone=${phone_number.value}`
}
const back = () => {
  router.go(-1)
}

const backHome = () => {
  router.push('/goods')
}

// 更新用户信息
const updateUDID = (udid_:string,userGoodsId:any) => {
  if (udid_.trim() == ""){
    return;
  }
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  let formData = new FormData()
  formData.append('udid',udid_)
  formData.append('userGoodsId',userGoodsId)
  Request.post('/user/goods/save',formData).then((res:any) => {
    console.log(res);
    if (res.code === 0) {
      closeToast()
      showSuccessToast('操作成功')
    }
  }).catch(err => {
    showFailToast(err.message)
  })
}

const kefu = () => {
  // window.open('https://work.weixin.qq.com/kfid/kfcc29d7dfa36a355f6','_blank')
  window.location.href = 'https://work.weixin.qq.com/kfid/kfcc29d7dfa36a355f6'
}

onMounted(() => {
  console.log(route);
  if(JSON.stringify(route.query) != '{}') {
    let phone = route.query.phone as string
    let udid_ = route.query.udid as string
    if (udid_) {
      udid.value = udid_
    }
    if (phone) {
      phone_number.value = phone
      search()
    } 
  }
  Request.get(`/launch`).then((res:any) => {
    if (res.data) {
      udidLink = res.data.config["client.user.udid.url"]
    }
  })

})
</script>

<style lang="less">
.order_page {
  // width: 100%;
  height: 100%;
  .title {
    height: 51px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #146DC9;
    padding: 0 15px;
    .text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #fff;
      font-weight: 500;
    }
    img {
      width: 20px;
      height: 20px;
    }
    .home {
      height: 32px;
      width: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .search_area {
    padding: 0 15px;
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    .van-cell__title {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }
  }
  .content_area {
    padding: 0 15px 15px 15px;
    .content_item {
      display: flex;
      margin-top: 20px;
      .logo {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 8px;
        }
      }
      .order {
        .app_name {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          margin-bottom: 5px;
        }
        .order_code,
        .order_buy,
        .pay_way,
        .create_time,
        .pay_time {
          font-size: 12px;
          color: #666;
          margin-bottom: 7px;
        }
        .order_price {
          margin-right: 10px;
        }
        .install {
          margin-top: 8px;
          width: 72px;
          height: 28px;
          color: #FFF;
          background: #FF8800;
          border-radius: 20px;
          font-size: 12px;
          line-height: 28px;
        }
        .jiaocheng {
          margin-top: 8px;
          margin-left: 15px;
          height: 28px;
          color: #FFF;
          border-radius: 20px;
          font-size: 12px;
          line-height: 28px;
        }
        .van-tag {
          margin-top: 8px;
          font-size: 12px;
        }
      }
    }
  }
  .seek_order {
      position: fixed;
      right: 4.8%;
      bottom: 62px;
      img {
        width: 70px;
        height: 70px;
      }
    }
}
</style>